<template>
  <div id="top">
    <div style="display: inline-block;float:left">
      <el-form>
        <el-form-item label="流程名称">
          <el-input v-model.trim="name" @input="query()"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: inline-block;float:left">
      <el-form>
        <el-form-item label="业务号">
          <el-input v-model.trim="bussinesskey" @input="query()"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div id="table">
    <el-table :data="pageLists" style="width: 100%">
      <el-table-column prop="businessKey" label="业务号" width="200" />
      <el-table-column prop="name" label="流程名称" width="180" />
      <el-table-column prop="currentTask" label="当前节点" />
      <el-table-column prop="startUserId" label="发起人" />
      <el-table-column prop="assignee" label="当前处理人" />
      <el-table-column prop="startTime" label="流程开始时间" />
      <el-table-column label="操作" width="300">
        <template #default="scope" >
          <el-button size="small" type="primary" @click="progress(scope.row)">查看流程进度</el-button>
          <el-button size="small" type="success" @click="seeHistory(scope.row)">查看执行记录</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div style="float: right;padding-top: 1%">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          background layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"/>
    </div>
  </div>
  <div id="historyDiaLog">
    <el-dialog v-model="historyFlag" title="执行记录" width="900">
      <div id="tableHistory">
        <el-table :data="historyLists" style="width: 100%">
          <el-table-column prop="taskName" label="流程名称" width="200" />
          <el-table-column prop="assignee" label="办理人" />
          <el-table-column prop="comment" label="审批意见" />
          <el-table-column prop="startTime" label="开始时间" />
          <el-table-column prop="endTime" label="结束时间" />

        </el-table>
        <div style="float: right">
          <el-pagination
              small
              v-model:current-page="pageNum2"
              v-model:page-size="pageSize2"
              background layout="prev, pager, next"
              :total="total2"
              @current-change="handleCurrentChange2"/>
        </div>
      </div>
    </el-dialog>
  </div>

</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {historyVue, listHistoryProcessVue, traceProcessVue} from "../../api/flow";
let bussinesskey = ref<string>('')
let name = ref<string>('');
let pageNum = ref<number>(1);
let pageSize = ref<number>(10);
let total = ref<number>(0);

let pageNum2 = ref<number>(1);
let pageSize2 = ref<number>(10);
let total2 = ref<number>(0);

let pageLists = ref<any>([])
let historyLists = ref<any>([])
let historyFlag = ref<boolean>(false)
let pid = ref<any>('')
onMounted(async () => {
  await query();
})
const query:any  = async () =>{
let res = await listHistoryProcessVue({pageNum:pageNum.value, name:name.value, pageSize:pageSize.value,bussinesskey:bussinesskey.value})
  pageLists.value = res.data.rows
  total.value = res.data.total
}
const progress:any = async (row) =>{
  window.open( import.meta.env.VITE_HTTP+`/flow/monitor/traceProcessVue/${row.processInstanceId}`)
}
const seeHistory:any = async (row) =>{
  let res = await historyVue({processInstanceId:row.processInstanceId,pageNum:pageNum2.value, pageSize:pageSize2.value})
  total2.value = res.data.total
  historyLists.value = res.data.rows
  pid.value = row.processInstanceId
  historyFlag.value = true;
}
const handleCurrentChange = async (val: number) => {
  pageNum.value = val;
  await query()
}
const handleCurrentChange2 = async (val: number) => {
  pageNum2.value = val;
 let res = await historyVue({processInstanceId: pid.value,pageNum:pageNum2.value, pageSize:pageSize2.value})
  total2.value = res.data.total
  historyLists.value = res.data.rows
}


</script>
<style scoped>

</style>
